import { Toast, List, InputItem, WhiteSpace, Button } from 'antd-mobile';

import './FormItem-GetValiCode.less'

function failToast(mesage) {
  Toast.fail(mesage, 2);
}
function infoToast(mesage) {
  Toast.info(mesage, 2);
}

class GetValiCode extends React.Component {
  state = {
    valiCD: false,
    valiNum: 60
  };

  _startCD = () => {
    this.setState({valiCD: true})
    this.timmer = setInterval(() => {
      if (this.state.valiNum < 1) {
        this._clearCD()
      } else {
        this.setState({valiNum: this.state.valiNum - 1})
      }
    }, 1000)
  }

  _clearCD = () => {
    this.timmer && clearInterval(this.timmer)
    this.setState({valiNum: 60, valiCD: false})
  }

  _clickHandle = () => {
    const phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;
  	if (!phoneReg.test(this.phone)) {
  	  infoToast(`请输入正确手机号格式`)
  	} else {
      this.props.valiClick(this.phone);
      infoToast(`验证码已发送`)
      this._startCD();
    }
  }

  componentWillUnmount() {
    this._clearCD()
  }

  render() {
    const { valiCD, valiNum } = this.state;
    const { getFieldProps } = this.props.form;
    return (
      <div className="getvalicode-div">
 		    <List>
          <List.Item
            className="noPadding"
            extra={
            // <Button
            //   type="primary"
            //   onClick={this._clickHandle}
            //   disabled={valiCD}
            //   size="small"
            // >{valiCD ? `(${valiNum})S` : `获取验证码`}</Button>
            null
            }>
            <InputItem
              placeholder="手机号"
              type="number"
              {...getFieldProps('mobile', {getValueProps: (value) => {this.phone = value}})}
              name="mobile"
            ></InputItem></List.Item>
        </List>
        {/* <WhiteSpace />
        <List>
          <InputItem
            placeholder="验证码"
            type="number"
            {...getFieldProps('code')}
            name="code"
          ></InputItem>
        </List> */}
      </div>
    );
  }
}

GetValiCode.defaultProps = {
  valiClick: () => {infoToast(`获取按钮被按下`)}
}

export default GetValiCode
